<template>
  <div>

    <page-layout>

      <a-card style="border-radius:0px!important;">
        <template #extra style=" position: fixed;top: 100px;right: 30px;z-index: 999;">
          <div v-if="editableData.data" class="editable-cell-input-wrapper">
            <a-popover v-model:visible="visible" title="是否确认提交！" trigger="click">
              <template #content>
                <a style="margin-right: 10px;" @click="save">确认提交</a>
                <a @click="hide">取消</a>
              </template>
              <a-button style="margin-right: 10px;" @click="hide" type="primary">取消编辑</a-button>
              <a-button type="primary">提交</a-button>
            </a-popover>
          </div>
          <div v-else class="editable-cell-text-wrapper">
            <a-button type="primary" style="margin-right: 10px;" @click="edit">编辑</a-button>
          </div>
          <!--          </template>-->

        </template>
        <!--        <a-row-->
        <!--          :gutter="16"-->
        <!--          style="margin-top: -5px; font-size: 16px"-->
        <!--        >-->
        <!--          <a-col :span="12" style="text-align: left;">项目名称：{{formState.xmmc}}</a-col>-->
        <!--          <a-col :span="10" style="text-align: left;">项目编号：2016-450225-76-01-012776(示例)</a-col>-->
        <!--          &lt;!&ndash;          <a-select&ndash;&gt;-->
        <!--          &lt;!&ndash;            v-model:value="shi"&ndash;&gt;-->
        <!--          &lt;!&ndash;            style="width: 20%"&ndash;&gt;-->
        <!--          &lt;!&ndash;            placeholder="Tags Mode"&ndash;&gt;-->
        <!--          &lt;!&ndash;            :options="shiData"&ndash;&gt;-->
        <!--          &lt;!&ndash;            @change="ChangeShi"&ndash;&gt;-->
        <!--          &lt;!&ndash;            labelInValue="true"&ndash;&gt;-->
        <!--          &lt;!&ndash;          >&ndash;&gt;-->
        <!--          &lt;!&ndash;          </a-select>&ndash;&gt;-->
        <!--        </a-row>-->
      </a-card>

    </page-layout>
    <a-collapse v-model:activeKey="activeKey" :bordered="false">
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel key="1" header="项目基本信息">
        <page-layout>
          <a-card>

            <a-descriptions bordered>
              <a-descriptions-item label="项目所在市">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-select
                      v-model:value="shi"
                      style="width: 120px"
                      :options="shiData"
                      labelInValue="true"
                      @change="ChangeShi"
                    >
                    </a-select>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.shimc}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="项目所在县">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-select
                      v-model:value="xian"
                      style="width: 120px"
                      :options="xianData"
                      labelInValue="true"
                      @change="ChangeXian"
                    >
                    </a-select>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.xianmc}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="项目主管部门">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.xiangmuzhuguanbumen" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.xiangmuzhuguanbumen}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="项目类型">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-select
                      ref="select"
                      v-model:value="editableData.reportIndex"
                      style="width: 100%;border: none;height: 100%;background-color: white;"
                      @focus="focus"
                    >
                      <a-select-option value="10">重大水利工程</a-select-option>
                      <a-select-option value="2">主要支流治理</a-select-option>
                      <a-select-option value="4">大中型病险水库除险加固</a-select-option>
                      <a-select-option value="5">大中型病险水闸除险加固</a-select-option>
                      <a-select-option value="3">新建中型水库工程</a-select-option>
                      <a-select-option value="30">新建小型水库工程</a-select-option>
                      <a-select-option value="40">小型病险水库除险加固</a-select-option>
                      <a-select-option value="108">水系连通及农村水系综合整治试点</a-select-option>
                      <a-select-option value="111">中小河流治理</a-select-option>
                      <a-select-option value="112">标准海堤建设</a-select-option>
                    </a-select>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.reportIndex}}
                    <!--                    <a-select
                                          v-model:value="editableData.reportIndex"
                                          style="width: 100%;border: none;height: 100%;background-color: white;"
                                          disabled
                                        >
                                          <a-select-option value="10">重大水利工程</a-select-option>
                                          <a-select-option value="2">主要支流治理</a-select-option>
                                          <a-select-option value="4">大中型病险水库除险加固</a-select-option>
                                          <a-select-option value="5">大中型病险水闸除险加固</a-select-option>
                                          <a-select-option value="3">新建中型水库工程</a-select-option>
                                          <a-select-option value="30">新建小型水库工程</a-select-option>
                                          <a-select-option value="40">小型病险水库除险加固</a-select-option>
                                          <a-select-option value="108">水系连通及农村水系综合整治试点</a-select-option>
                                          <a-select-option value="111">中小河流治理</a-select-option>
                                          <a-select-option value="112">标准海堤建设</a-select-option>
                                        </a-select>-->
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="联系人">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.xmdwfzr" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.xmdwfzr}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="电话">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.dhhm" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.dhhm}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="运行管理单位">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.yunxingguanli" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.yunxingguanli}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="工程规模">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-select
                      ref="select"
                      v-model:value="editableData.gcgm"
                      style="width: 100%;border: none;height: 100%;background-color: white;"
                      @focus="focus"
                    >
                      <a-select-option value="大（1）型">大（1）型</a-select-option>
                      <a-select-option value="大（2）型">大（2）型</a-select-option>
                      <a-select-option value="中型">中型</a-select-option>
                      <a-select-option value="小（1）型">小（1）型</a-select-option>
                      <a-select-option value="小（2）型">小（2）型</a-select-option>
                    </a-select>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.gcgm}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="堤防级别">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-select
                      ref="select"
                      v-model:value="editableData.dfjb"
                      style="width: 100%;border: none;height: 100%;background-color: white;"
                      @focus="focus"
                    >
                      <a-select-option value="1级">1级</a-select-option>
                      <a-select-option value="2级">2级</a-select-option>
                      <a-select-option value="3级">3级</a-select-option>
                      <a-select-option value="4级">4级</a-select-option>
                      <a-select-option value="5级">5级</a-select-option>
                    </a-select>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.dfjb}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="工期(月)">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.gq" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.gq}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="保护人口(万人)">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.bhrk" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.bhrk}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="开工至今累计农民工用工(人*天)">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.ljnmyg" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.ljnmyg}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="开工至今累计贫困人口用工(人*天)">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.ljpkrkyg" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.ljpkrkyg}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="填报人">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.tbren" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.tbren}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="联系方式">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.tbrenphone" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.tbrenphone}}
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

        </page-layout>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="项目建议书" :disabled="false">
        <page-layout>
          <a-card style="border-radius:0px!important;" title="项目建议书">
            <a-descriptions bordered>
              <a-descriptions-item label="投资额">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.pftz" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.pftz}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="设计单位名称" :span="2">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.sjdwmc" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.sjdwmc}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="批复时间">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-date-picker v-model:value="editableData.pftime" :valueFormat="dateFormat" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.pftime}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="批复文件" :span="2">
                <div v-if="editableData.data" class="editable-cell-input-wrapper">
                  <!--                    <template>-->
                  <a-upload
                    action="http://localhost:9292/api/sys/oss/upload?bcpath=xmxx"
                    :multiple="true"
                    :file-list="fileList"
                    :headers="headers"
                    @change="handleChangeJys"
                  >
                    <a-button>
                      <upload-outlined></upload-outlined>
                      上传
                    </a-button>
                  </a-upload>
                </div>
                <div v-else class="editable-cell-text-wrapper">
                  <a-upload v-model:file-list="fileList" :showUploadList={showRemoveIcon:false}></a-upload>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="主要建设内容" :span="3">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.jsnr" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.jsnr}}
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </page-layout>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="可研批复信息" :disabled="false">
        <page-layout>
          <a-card>
            <a-descriptions bordered>
              <a-descriptions-item label="投资额">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.kypftz" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.kypftz}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="设计单位名称" :span="2">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.kysjdwmc" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.kysjdwmc}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="批复时间">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-date-picker v-model:value="editableData.kypftime" :valueFormat="dateFormat" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.kypftime}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="批复文件" :span="2">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <!--                    <template>-->
                    <a-upload
                      action="http://localhost:9292/api/sys/oss/upload?bcpath=xmxx"
                      :multiple="true"
                      :file-list="kyfileList"
                      :headers="headers"
                      @change="handleChangeKy"
                    >
                      <a-button>
                        <upload-outlined></upload-outlined>
                        上传
                      </a-button>
                    </a-upload>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    <a-upload v-model:file-list="kyfileList" :showUploadList={showRemoveIcon:false}></a-upload>
                  </div>

                  <!--                  <div v-if="editableData.data" class="editable-cell-input-wrapper">-->
                  <!--                    <a-button type="primary" size="small" style="background-color: forestgreen;" @click="Upload('kypffile')">上传</a-button>-->
                  <!--                  </div>-->
                  <!--                  <div v-else class="editable-cell-text-wrapper">-->
                  <!--                    <a-upload v-model:file-list="kyfileList" :formState="formState" :showUploadList={showRemoveIcon:false}></a-upload>-->
                  <!--                  </div>-->
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="主要建设内容" :span="3">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.kyjsnr" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.kyjsnr}}
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </page-layout>
      </a-collapse-panel>
      <a-collapse-panel key="4" header="初步设计信息" :disabled="false">
        <page-layout>
          <a-card>
            <a-descriptions bordered>
              <a-descriptions-item label="投资额">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.cbpftz" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.cbpftz}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="设计单位名称" :span="2">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.cbsjdwmc" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.cbsjdwmc}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="批复时间">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-date-picker v-model:value="editableData.cbpftime" :valueFormat="dateFormat" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.cbpftime}}
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="批复文件" :span="2">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <!--                    <template>-->
                    <a-upload
                      action="http://localhost:9292/api/sys/oss/upload?bcpath=xmxx"
                      :multiple="true"
                      :file-list="cbfileList"
                      :headers="headers"
                      @change="handleChangeCb"
                    >
                      <a-button>
                        <upload-outlined></upload-outlined>
                        上传
                      </a-button>
                    </a-upload>
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    <a-upload v-model:file-list="cbfileList" :showUploadList={showRemoveIcon:false}></a-upload>
                  </div>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="主要建设内容" :span="3">
                <div class="editable-cell">
                  <div v-if="editableData.data" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData.cbjsnr" @pressEnter="save()" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{formState.cbjsnr}}
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </page-layout>
      </a-collapse-panel>
    </a-collapse>
  </div>


</template>
<script>
import global from '../global/global'
import request from "@/api/request";
import {reactive, ref, defineComponent, toRefs, computed, watch, toRaw} from "vue";
import {UploadOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";

/** 岗位列表 */
export const list = data => {
  return request.request({
    url: 'api/project/xiangmu/info',
    params: data,
    method: 'GET'
  })
}
export const saveObj = data => {
  return request.request({
    url: '/api/project/xiangmu/edit',
    data: data,
    method: 'PUT'
  })
}



export default {
  components: {UploadOutlined},
  data () {
    return {
      date: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      const layui = window.layui;
      layui.use("layer", () => {
        const layer = layui.layer;

      })
    });
  },
  methods: {
    showInfo: function(){
      const layui = window.layui;
      var domain1 = window.location.protocol + "//" + window.location.host;
      layui.config({
        base: domain1 + '/layui/ext'  //配置插件根目录
      }).extend({
        layarea: 'layarea/layarea', //插件名(这里我放在了根目录下)
      });
      var layer;
      layui.use(() => {
        layer = layui.layer;

        const layarea = layui.layarea;
        //省市县下拉
        /*layarea.render({
          elem: '#area-picker',
          change: function (res) {

          }
        });*/
      })
      layer.open({
        type: 1,
        title: '编辑',
        content: $("#expertDiv"),
        area: ['50%', '50%'],
        btn: ['提交', '取消'],
        shade: 0,
        yes: function (layIndex) {
          layer.closeAll();
          $("#expertDiv").hide();
        },
        btn2: function (index, layero) {//取消按钮事件
          $('#expertDiv').hide();
        },
        cancel: function (index, layero) {//右上角关闭事件
          $('#expertDiv').hide();
        }
      })
    }
  },
  setup() {
    const dateFormat = 'YYYY-MM-DD';
    //市县下拉联动
    const shiData=ref([]);
    const xianData=ref([]);
    const shi = ref();
    const xian = ref();
    global.codeList({'superid':'450000'}).then((response)=>{
      shiData.value = response.data.map(item =>({value : item.value, label : item.name}));
      global.codeList({'superid':shiData.value[0].value}).then((response)=>{
        xianData.value = response.data.map(item =>({value : item.value, label : item.name}));
      })
    })

    const ChangeShi = value => {
      editableData.shimc=value.label;
      global.codeList({'superid':value.value}).then((response)=>{
        xianData.value = response.data.map(item =>({value : item.value, label : item.name}));
      })
    };
    const ChangeXian = value => {
      editableData.xianmc=value.label;
      global.codeList({'superid':value.value}).then((response)=>{
        xianData.value = response.data.map(item =>({value : item.value, label : item.name}));
      })
    };

    //文件上传
    const state = reactive({
      visibleUpload: false,
      param:'',
    })
    const Upload = function(param){
      state.visibleUpload = true;
      state.param = param;
    }
    const closeUpload = function(){
      state.visibleUpload = false
      state.param = '';
    }

    const fileList = ref([]);
    const kyfileList = ref([]);
    const cbfileList = ref([]);
    //页面编辑
    const visible = ref(false);
    const hide = () => {
      delete editableData.data;
      visible.value = false;
    };
    const editableData = reactive({});
    const formState = reactive({});
    //根据id获取项目信息
    list({'id':global.xmid}).then((response)=>{
      Object.assign(formState, response.data);
      if (response.data != null){
        formState.reportIndex = global.getReportIndexName("ri"+ response.data.reportIndex);
        shi.value={value:response.data.shi,label:response.data.shimc};
        xian.value={value:response.data.xian,label:response.data.xianmc};
        if(response.data.pffile!=null&&response.data.pffile.length>0){
          fileList.value=[];
          let files=response.data.pffile.split(',');
          for(let i=0;i<files.length;i++){
            global.fileList({'id':files[i]}).then((response)=>{
              let file={
                uid: i+1,
                name: response.data[0].name,
                status: 'done',
                url: response.data[0].path,
              }
              fileList.value.push(file);
            })
          }
        }
        if(response.data.kypffile!=null&&response.data.kypffile.length>0){
          kyfileList.value=[];
          let files=response.data.kypffile.split(',');
          for(let i=0;i<files.length;i++){
            global.fileList({'id':files[i]}).then((response)=>{
              let file={
                uid: i+1,
                name: response.data[0].name,
                status: 'done',
                url: response.data[0].path,
              }
              kyfileList.value.push(file);
            })
          }
        }
        if(response.data.cbpffile!=null&&response.data.cbpffile.length>0){
          cbfileList.value=[];
          let files=response.data.cbpffile.split(',');
          for(let i=0;i<files.length;i++){
            global.fileList({'id':files[i]}).then((response)=>{
              let file={
                uid: i+1,
                name: response.data[0].name,
                status: 'done',
                url: response.data[0].path,
              }
              cbfileList.value.push(file);
            })
          }
        }
      }
    });
    const edit = () => {
      formState.reportIndex = global.getReportIndexName("ri"+ editableData.reportIndex);
      Object.assign(editableData, formState);
      editableData.data='true';
    };
    const save = () => {
      console.log(toRaw(editableData));
      delete editableData.data;
      saveObj(toRaw(editableData)).then((response)=>{
        if(response.success){
          message.success({ content: '保存成功', duration: 1 }).then(()=>{
            Object.assign(formState, editableData);
            formState.reportIndex = global.getReportIndexName("ri"+ editableData.reportIndex);
            hide();
          });
        }else{
          message.error({ content: '保存失败', duration: 1 }).then(()=>{
            console.log(response);
          });
        }
      })

    };
    //折叠面板
    const activeKey = ref(['1']);
    const customStyle =
      'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';

    //文件上传
    const tokenKey = localStorage.getItem("token_key");
    const token = localStorage.getItem("token")
    const headers = {
      "Authorization": token,
      "Authorization-key": tokenKey
    };
    const handleChangeJys = info => {
      let resFileList = [...info.fileList];
      let fileids="";
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.data.path;
          if(fileids.length>0){
            fileids += "," + file.response.data.id;
          }else{
            fileids += file.response.data.id;
          }
        }
        return file;
      });
      editableData.pffile=fileids;
      fileList.value = resFileList;
    };
    const handleChangeCb = info => {
      let resFileList = [...info.fileList];

      console.log(resFileList);
      // resFileList = resFileList.slice(-2);
      let fileids="";
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.data.path;
          console.log(file.response.data.id);
          if(fileids.length>0){
            fileids += "," + file.response.data.id;
          }else{
            fileids += file.response.data.id;
          }
        }
        return file;
      });
      editableData.cbpffile=fileids;
      cbfileList.value = resFileList;
    };
    const handleChangeKy = info => {
      let resFileList = [...info.fileList];

      console.log(resFileList);
      // resFileList = resFileList.slice(-2);
      let fileids="";
      resFileList = resFileList.map(file => {
        if (file.response) {
          file.url = file.response.data.path;
          console.log(file.response.data.id);
          if(fileids.length>0){
            fileids += "," + file.response.data.id;
          }else{
            fileids += file.response.data.id;
          }
        }
        return file;
      });
      editableData.kypffile=fileids;
      kyfileList.value = resFileList;
    };

    return {
      visible,
      hide,
      formState,
      editableData,
      edit,
      save,
      shiData,
      xianData,
      shi,
      xian,
      ChangeShi,
      ChangeXian,
      state,
      Upload,
      closeUpload,
      fileList,
      kyfileList,
      cbfileList,
      activeKey,
      customStyle,
      handleChangeJys,
      handleChangeKy,
      handleChangeCb,
      headers,
      dateFormat
    };
  }
}
</script>
<style>
.ant-card-head {
  font-weight: 600;
  font-size: 18px;
}
.ant-card-body{
  margin-top: -15px;
}

.layui-form-label{
  width: 115px;
}

.layui-input-block{
  margin-left: 115px;
}
</style>
